<template>
	<view
		ref="nvueElAni"
		v-if="showValue"
		class="fixed l-0 t-0 flex flex-row flex-row-center-center on"
		:class="[showMask ? 'overflowMask' : 'overflowMaskNo']"
		:style="{ width: sysinfo.width + 'px', height: sysinfo.height + 'px', top: 0 + 'px' }"
	>
		<tm-sheet
			v-if="showValue"
			:style="{ transform: isNvue ? 'scale(0,0)' : 'scale(1,1)' }"
			ref="nvueElAniContent"
			class="scale nvueContent"
			:_style="props._style"
			:_class="props._class"
			:color="bgColor"
			:border="0"
			:shadow="10"
			:width="props.width"
			:height="props.height"
			:margin="[40, 40]"
			:round="props.round"
			:padding="props.padding"
		>
			<slot>
				<view class="flex flex-center flex-col ma-30" style="line-height: normal">
					<tm-icon
						_style="line-height: normal"
						style="line-height: normal"
						_class="pa-10"
						:spin="model_ref == 'load'"
						:color="color_ref"
						:fontSize="72"
						:name="icon_ref"
					></tm-icon>
					<tm-text :font-size="30" :_class="`pt-8 text-overflow-${lines_ref}`" :label="text_ref"></tm-text>
				</view>
			</slot>
		</tm-sheet>
	</view>
</template>

<script lang="ts" setup>
/**
 * 消息提示
 * @description 消息提示，属于全局阻断式提醒，会打断用户操作。
 */
import { language } from '../../tool/lib/language'
import tmSheet from '../tm-sheet/tm-sheet.vue'
import tmText from '../tm-text/tm-text.vue'
import tmIcon from '../tm-icon/tm-icon.vue'
import tmTranslate from '../tm-translate/tm-translate.vue'
import tmOverlay from '../tm-overlay/tm-overlay.vue'
import { config, modelType } from './interface'
import { useTmpiniaStore } from '../../tool/lib/tmpinia'
import { getCurrentInstance, computed, ref, provide, inject, ComponentInternalInstance, onUnmounted, nextTick, watch, Ref, PropType } from 'vue'
// #ifdef APP-PLUS-NVUE
const Binding = uni.requireNativePlugin('bindingx')
const dom = uni.requireNativePlugin('dom')
const animation = uni.requireNativePlugin('animation')
// #endif
const store = useTmpiniaStore()
const tranAni = ref<InstanceType<typeof tmTranslate> | null>(null)
const Overlay = ref<InstanceType<typeof tmOverlay> | null>(null)
const emits = defineEmits(['click'])
const proxy = getCurrentInstance()?.proxy ?? null
import { useWindowInfo } from '../../tool/useFun/useWindowInfo'
const props = defineProps({
	//自定义的样式属性
	_style: {
		type: [Array, String, Object],
		default: () => {}
	},
	round: {
		type: Number,
		default: 12
	},
	padding: {
		type: Array as PropType<Array<number>>,
		default: () => [24, 0]
	},
	//自定义类名
	_class: {
		type: [Array, String],
		default: 'flex-center'
	},
	//是否显示遮罩
	mask: {
		type: [Boolean],
		default: true
	},
	//自动关闭时,需要显示多久关闭,单位ms
	duration: {
		type: Number,
		default: 1500
	},
	width: {
		type: Number,
		default: 300
	},
	height: {
		type: Number,
		default: 300
	},
	lines: {
		type: Number,
		default: 1
	}
})

const sysinfo = useWindowInfo()

const _lines = computed(() => props.lines)
let isNvue = ref(false)
// #ifdef APP-NVUE
isNvue.value = true
// #endif

const dur = ref(props.duration)
let uid: number = NaN
const bgColor = ref('white')
const model_ref: Ref<modelType> = ref('info')
const showValue = ref(false)
const icon_ref = ref('')
const text_ref = ref('')
const color_ref = ref('')
const showMask = ref(props.mask)
const dark_ref = ref(false)
const lines_ref = ref(_lines.value)

const modelIcon = computed(() => {
	return {
		load: {
			icon: 'tmicon-loading',
			color: 'primary',
			text: language('message.load.text')
		},
		error: {
			icon: 'tmicon-times-circle',
			color: 'red',
			text: language('message.error.text')
		},
		info: {
			icon: 'tmicon-info-circle',
			text: language('message.info.text'),
			color: 'black'
		},
		warn: {
			icon: 'tmicon-exclamation-circle',
			text: language('message.warn.text'),
			color: 'orange'
		},
		quest: {
			icon: 'tmicon-question-circle',
			text: language('message.quest.text'),
			color: 'pink'
		},
		success: {
			icon: 'tmicon-check-circle',
			text: language('message.success.text'),
			color: 'green'
		},
		disabled: {
			icon: 'tmicon-ban',
			text: language('message.disabled.text'),
			color: 'red'
		},
		wait: {
			icon: 'tmicon-ios-alarm',
			text: language('message.wait.text'),
			color: 'black'
		}
	}
})

function show(argFs: config) {
	if (showValue.value || !isNaN(uid)) {
		showValue.value = false
		clearTimeout(uid)
		nextTick(() => {
			showAction(argFs)
		})
	} else {
		showAction(argFs)
	}
}
function showAction(argFs: config) {
	//显示所需要的参数
	let arg = argFs || {}
	let { duration, icon, text, color, dark, model, mask, lines } = arg
	model_ref.value = typeof model == 'undefined' ? model_ref.value : model
	icon_ref.value = icon = icon ?? modelIcon.value[model_ref.value].icon
	text_ref.value = text = text ?? modelIcon.value[model_ref.value].text
	color_ref.value = color = color ?? modelIcon.value[model_ref.value].color
	showMask.value = typeof mask === 'boolean' ? mask : showMask.value
	lines_ref.value = lines ?? _lines.value

	if (dark === true) {
		bgColor.value = 'black'
	}
	if (typeof dark !== 'boolean') {
		dark = store.tmStore.dark
	}
	if (color_ref.value == 'white' || color_ref.value == 'black') {
		color_ref.value = ''
	}

	dark_ref.value = dark
	if (typeof duration === 'undefined') {
		duration = props.duration
	}
	dur.value = isNaN(parseInt(String(duration))) ? 1500 : parseInt(String(duration))
	showValue.value = true
	// #ifdef APP-NVUE
	setTimeout(function () {
		showNvueAniMation()
	}, 50)
	// #endif
	if (model_ref.value != 'load') {
		uid = setTimeout(function () {
			showValue.value = false
			uid = NaN
		}, dur.value)
	}
}

function showNvueAniMation() {
	var el = proxy.$refs.nvueElAni
	var elContent = proxy.$refs.nvueElAniContent
	animation.transition(
		el,
		{
			styles: {
				backgroundColor: 'rgba(0,0,0,0)',
				transformOrigin: 'center center'
			},
			duration: 1, //ms
			timingFunction: 'ease',
			delay: 0 //ms
		},
		() => {
			animation.transition(
				el,
				{
					styles: {
						backgroundColor: 'rgba(0,0,0,0.3)',
						transformOrigin: 'center center'
					},
					duration: 220, //ms
					timingFunction: 'ease',
					delay: 0 //ms
				},
				() => {}
			)
		}
	)
	animation.transition(
		elContent,
		{
			styles: {
				opacity: 1,
				transform: 'scale(1,1)',
				transformOrigin: 'center center'
			},
			duration: 220, //ms
			timingFunction: 'ease',
			delay: 0 //ms
		},
		() => {}
	)
}

//隐藏
function hide() {
	showValue.value = false
	uid = NaN
	clearTimeout(uid)
}
defineExpose({
	show: show,
	hide: hide
})
</script>

<style scoped>
.overflowMask {
	position: fixed;
	/* #ifndef APP-NVUE */
	z-index: 1000 !important;
	animation: aniover 0.5s;
	background-color: rgba(0, 0, 0, 0.3);
	transition-duration: 0.5s;
	transition-property: background, transform;
	transition-timing-function: ease;
	transition-delay: 0.3s;
	/* #endif */
	/* #ifdef APP-NVUE */
	background-color: rgba(0, 0, 0, 0);
	/* #endif */
}
.overflowMaskNo {
	/* #ifndef APP-NVUE */
	z-index: 1000 !important;
	background-color: rgba(0, 0, 0, 0);
	/* #endif */
}
.nvueContent {
	/* #ifdef APP-NVUE */
	opacity: 0;
	/* #endif */
}
.scale {
	/* #ifndef APP-NVUE */
	animation: aniscale 0.3s;
	/* #endif */
}
/* #ifndef APP-NVUE */
@keyframes aniover {
	0% {
		background-color: rgba(0, 0, 0, 0);
	}
	100% {
		background-color: rgba(0, 0, 0, 0.3);
	}
}
@keyframes aniscale {
	0% {
		opacity: 0;
		transform: scale(0.7, 0.7);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
/* #endif */
</style>
